<template>
  <div class="chat-container">
    <!-- 顶部栏 -->
    <div class="chat-header">
      <button class="back-btn" @click="goBack">返回</button>
      <span class="chat-title">{{ chatUser.nickname }}</span>
    </div>

    <!-- 消息区 -->
    <div class="chat-body" ref="chatBody">
      <div
        v-for="msg in messages"
        :key="msg.id"
        :class="['chat-message', msg.fromMe ? 'from-me' : 'from-other']"
      >
        <img
          class="avatar"
          :src="msg.fromMe ? myAvatar : chatUser.avatar"
          alt="头像"
        />
        <div class="bubble">{{ msg.content }}</div>
      </div>
    </div>

    <!-- 输入区 -->
    <div class="chat-footer">
      <input
        v-model="input"
        @keyup.enter="sendMessage"
        placeholder="请输入消息"
        class="chat-input"
      />
      <button class="send-btn" @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ChatWindow", // 或 ChatPage、ChatPanel 等多单词名称
  data() {
    return {
      chatUser: {
        nickname: "好友昵称",
        avatar: require("@/assets/logo.png"), // 替换为实际头像
      },
      myAvatar: require("@/assets/logo.png"), // 替换为自己头像
      messages: [
        // 示例数据
        { id: 1, content: "你好！", fromMe: false },
        { id: 2, content: "你好，有什么可以帮你？", fromMe: true },
      ],
      input: "",
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    sendMessage() {
      if (!this.input.trim()) return;
      this.messages.push({
        id: Date.now(),
        content: this.input,
        fromMe: true,
      });
      this.input = "";
      this.$nextTick(() => {
        this.$refs.chatBody.scrollTop = this.$refs.chatBody.scrollHeight;
      });
      // TODO: 这里可以调用后端API或WebSocket发送消息
    },
  },
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #ededed;
}
.chat-header {
  height: 50px;
  background: #ededed;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 0 10px;
}
.back-btn {
  margin-right: 10px;
  background: none;
  border: none;
  color: #07c160;
  font-size: 16px;
  cursor: pointer;
}
.chat-title {
  font-weight: bold;
  font-size: 18px;
}
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: #f7f7f7;
}
.chat-message {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}
.from-me {
  flex-direction: row-reverse;
}
.from-other {
  flex-direction: row;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: 0 8px;
}
.bubble {
  max-width: 60%;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  font-size: 15px;
  word-break: break-all;
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.from-me .bubble {
  background: #95ec69;
}
.chat-footer {
  display: flex;
  align-items: center;
  padding: 8px;
  background: #ededed;
  border-top: 1px solid #ddd;
}
.chat-input {
  flex: 1;
  height: 36px;
  border-radius: 18px;
  border: 1px solid #ccc;
  padding: 0 12px;
  font-size: 15px;
  outline: none;
}
.send-btn {
  margin-left: 8px;
  background: #07c160;
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 0 18px;
  height: 36px;
  font-size: 15px;
  cursor: pointer;
}
</style> 